@import '../../../themes/basic/base-all.less';

@radio-name: tiRadio;

[@{radio-name}] + label {
  --ti-radio-container-size: var(--ti-common-size-4x);
  --ti-radio-mark-size: var(--ti-common-size-2x);
  --ti-radio-border-weight: var(--ti-common-border-weight-normal);
  --ti-radio-mark-offset: calc((var(--ti-radio-container-size) - var(--ti-radio-mark-size) - var(--ti-radio-border-weight) * 2) / 2);
  --ti-radio-dark-checked-active-color: var(--ti-common-color-text-link-darkbg);
  --ti-radio-timing-function-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ti-radio-line-height: 1.5em;
}

input[type='radio'][@{radio-name}] {
  // radio的input框不需要显示：radio的样式使用span/label定制，此处只使用input的点选功能
  // 之前设置为left: -9999px，虽然也能让元素不可见，但是当有横向滚动条时，元素聚焦会导致页面移向最左边
  display: none !important;
  // basic
  & + .ti3-radio {
    .box-sizing(border-box);
    display: inline-flex;
    flex-shrink: 0;
    line-height: var(--ti-radio-line-height);
    margin-bottom: 0px;
    font-weight: normal;
    cursor: pointer;
    .user-select();
    .ti3-radio-skin {
      .box-sizing(border-box);
      flex-shrink: 0;
      position: relative;
      display: inline-block;
      margin-bottom: 0px;
      margin-top: calc(
        (var(--ti-radio-line-height) - var(--ti-radio-container-size)) / 2
      ); // 为保证按钮与文本对齐，margin-top 的值为（文本的行高 (28px) -  按钮宽高 (16px)）/ 2
      height: var(--ti-radio-container-size);
      width: var(--ti-radio-container-size);
      border: var(--ti-radio-border-weight) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
      .border-radius(var(--ti-common-border-radius-3));
      font-weight: normal;
      cursor: pointer;
      .transition (background-color; 0.15s, border-color; 0.15s);

      &::after {
        .box-sizing(border-box);
        position: absolute;
        content: '';
        left: var(--ti-radio-mark-offset);
        top: var(--ti-radio-mark-offset);
        height: var(--ti-radio-mark-size);
        width: var(--ti-radio-mark-size);
        opacity: 0;
        .border-radius(var(--ti-common-border-radius-3));
      }
    }
    .ti3-radio-label {
      margin-left: var(--ti-common-space-2x);
      cursor: pointer;
      color: var(--ti-common-color-text-primary);
      margin-bottom: 0px;
      font-weight: var(--ti-common-font-weight-4);
      font-size: var(--ti-common-font-size-base);
    }
  }
  // unchecked hover
  &:not(:disabled):not(:checked) + .ti3-radio .ti3-radio-skin {
    border-color: var(--ti-common-color-line-normal);
    &::after {
      background-color: var(--ti-common-color-bg-emphasize);
      // 未选中状态： opacity从1到0，从中心向上移动
      opacity: 0;
      transform: translate(0px, -7px) scale(0);
      transition: opacity 0.15s ease-out, transform 0.15s;
    }
    &:focus {
      border-color: var(--ti-common-color-line-active);
    }
    &:hover {
      border-color: var(--ti-common-color-line-active);
      .transition(border-color; 0.2s; var(--ti-radio-timing-function-default));
    }
    &:active {
      border-color: var(--ti-common-color-line-active);
    }
  }
  &:not(:disabled):checked + .ti3-radio .ti3-radio-skin {
    border-color: var(--ti-common-color-line-active);
    &::after {
      background-color: var(--ti-common-color-bg-emphasize);
      // 选中状态：opacity从0到1，原点位置从上边7px移到中心位置
      opacity: 1;
      transform: translate(0px, 0px) scale(1);
      transition: opacity 0.2s ease-out, transform 0.2s;
    }
    &:hover,
    &:focus {
      border-color: var(--ti-common-color-bg-hover);
      &::after {
        background-color: var(--ti-common-color-bg-hover);
      }
    }
    &:hover {
      // 非禁用，选中时hover动画
      .transition (background-color; 0.2s; var(--ti-radio-timing-function-default),
                    border-color; 0.2s; var(--ti-radio-timing-function-default),
                    content; 0.2s; var(--ti-radio-timing-function-default));;
    }
    &:active {
      border-color: var(--ti-common-color-bg-hover);
      &::after {
        background-color: var(--ti-common-color-bg-hover);
      }
    }
  }
  // disable
  &:disabled + .ti3-radio {
    cursor: not-allowed;
    .ti3-radio-skin {
      background-color: var(--ti-common-color-bg-disabled);
      border-color: var(--ti-common-color-line-disabled);
      cursor: not-allowed;
    }
    .ti3-radio-label {
      color: var(--ti-common-color-text-disabled);
      cursor: not-allowed;
    }
  }
  &:disabled:checked + .ti3-radio .ti3-radio-skin::after {
    background-color: var(--ti-common-color-bg-secondary);
    cursor: not-allowed;
    opacity: 1;
  }
  // hide
  &.ng-hide + .ti3-radio {
    display: none !important;
  }
}
// [dark]，适配深色背景，目前是内部组件discount使用，没有提供示例
input[type='radio'][@{radio-name}][dark] {
  & + .ti3-radio .ti3-radio-label {
    color: var(--ti-common-color-text-darkbg);
  }

  &:checked:not(:disabled) + .ti3-radio .ti3-radio-skin {
    border-color: var(--ti-common-color-icon-darkbg-active);
    &::after {
      background-color: var(--ti-common-color-icon-darkbg-active);
    }
    &:hover,
    &:active,
    &:focus {
      border-color: var(--ti-radio-dark-checked-active-color);
      &::after {
        background-color: var(--ti-radio-dark-checked-active-color);
      }
    }
  }
  &:not(:checked):not(:disabled) + .ti3-radio .ti3-radio-skin {
    border-color: var(--ti-common-color-line-normal);
    &:hover,
    &:active,
    &:focus {
      border-color: var(--ti-common-color-icon-darkbg-active);
    }
  }
  &:disabled + .ti3-radio .ti3-radio-skin {
    background-color: var(--ti-common-color-icon-disabled);
    border-color: var(--ti-common-color-line-disabled);
    &::after {
      background-color: var(--ti-common-color-bg-dark-disabled);
    }
  }
}
